
#waifu {
	bottom: -1000px;
	left: 10px;
	position: fixed;
	transform: translateY(3px);
	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
	z-index: 30;
}

#waifu:hover {
 -webkit-transform:translateY(0);
 transform:translateY(0)
}

@media(max-width:860px) {
 #waifu {
  transform:scale(.8) translate(-30px,37px)
 }
 #waifu:hover {
  -webkit-transform:scale(.8) translate(-30px,37px);
  transform:scale(.8) translate(-30px,37px)
 }
}
@media(max-width:560px) {
 #waifu {
  transform:scale(.5) translate(-150px,150px)
 }
 #waifu:hover {
  -webkit-transform:scale(.5) translate(-150px,150px);
  transform:scale(.5) translate(-150px,150px)
 }
}

#waifu-tips {
 opacity:0;
 width:250px;
 height:auto;
 min-height:70px;
 margin:-20px 20px;
 padding:7px 10px;
 border-radius:12px;
 box-sizing:border-box;
 box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);
 transition:box-shadow .2s ease;
 background:#fafafa;
 color:#333;
 font-size:12px;
 text-overflow:ellipsis;
 overflow:hidden;
 position:absolute;
 animation-delay:5s;
 animation-duration:50s;
 animation-iteration-count:infinite;
 animation-name:shake;
 animation-timing-function:ease-in-out;
}

#waifu-tips.waifu-tips-active {
	opacity: 1;
	transition: opacity .2s;
}

#waifu-tips span {
	color: #0099cc;
}

#waifu #live2d {
	cursor: grab;
	position: relative;
}

#waifu #live2d:active {
	cursor: grabbing;
}

#waifu-tool {
	display: none;
	color: #aaa;
	opacity: 0;
	position: absolute;
	right: -10px;
	top: 70px;
	transition: opacity 1s;
}

#waifu:hover #waifu-tool {
	opacity: 1;
}

#waifu-tool span {
	color: #5b6c7d;
	cursor: pointer;
	display: block;
	line-height: 30px;
	text-align: center;
	transition: color .3s;
}

#waifu-tool span:hover {
	color: #0684bd; /* #34495e */
}

@keyframes shake {
	2% {
		transform: translate(.5px, -1.5px) rotate(-.5deg);
	}

	4% {
		transform: translate(.5px, 1.5px) rotate(1.5deg);
	}

	6% {
		transform: translate(1.5px, 1.5px) rotate(1.5deg);
	}

	8% {
		transform: translate(2.5px, 1.5px) rotate(.5deg);
	}

	10% {
		transform: translate(.5px, 2.5px) rotate(.5deg);
	}

	12% {
		transform: translate(1.5px, 1.5px) rotate(.5deg);
	}

	14% {
		transform: translate(.5px, .5px) rotate(.5deg);
	}

	16% {
		transform: translate(-1.5px, -.5px) rotate(1.5deg);
	}

	18% {
		transform: translate(.5px, .5px) rotate(1.5deg);
	}

	20% {
		transform: translate(2.5px, 2.5px) rotate(1.5deg);
	}

	22% {
		transform: translate(.5px, -1.5px) rotate(1.5deg);
	}

	24% {
		transform: translate(-1.5px, 1.5px) rotate(-.5deg);
	}

	26% {
		transform: translate(1.5px, .5px) rotate(1.5deg);
	}

	28% {
		transform: translate(-.5px, -.5px) rotate(-.5deg);
	}

	30% {
		transform: translate(1.5px, -.5px) rotate(-.5deg);
	}

	32% {
		transform: translate(2.5px, -1.5px) rotate(1.5deg);
	}

	34% {
		transform: translate(2.5px, 2.5px) rotate(-.5deg);
	}

	36% {
		transform: translate(.5px, -1.5px) rotate(.5deg);
	}

	38% {
		transform: translate(2.5px, -.5px) rotate(-.5deg);
	}

	40% {
		transform: translate(-.5px, 2.5px) rotate(.5deg);
	}

	42% {
		transform: translate(-1.5px, 2.5px) rotate(.5deg);
	}

	44% {
		transform: translate(-1.5px, 1.5px) rotate(.5deg);
	}

	46% {
		transform: translate(1.5px, -.5px) rotate(-.5deg);
	}

	48% {
		transform: translate(2.5px, -.5px) rotate(.5deg);
	}

	50% {
		transform: translate(-1.5px, 1.5px) rotate(.5deg);
	}

	52% {
		transform: translate(-.5px, 1.5px) rotate(.5deg);
	}

	54% {
		transform: translate(-1.5px, 1.5px) rotate(.5deg);
	}

	56% {
		transform: translate(.5px, 2.5px) rotate(1.5deg);
	}

	58% {
		transform: translate(2.5px, 2.5px) rotate(.5deg);
	}

	60% {
		transform: translate(2.5px, -1.5px) rotate(1.5deg);
	}

	62% {
		transform: translate(-1.5px, .5px) rotate(1.5deg);
	}

	64% {
		transform: translate(-1.5px, 1.5px) rotate(1.5deg);
	}

	66% {
		transform: translate(.5px, 2.5px) rotate(1.5deg);
	}

	68% {
		transform: translate(2.5px, -1.5px) rotate(1.5deg);
	}

	70% {
		transform: translate(2.5px, 2.5px) rotate(.5deg);
	}

	72% {
		transform: translate(-.5px, -1.5px) rotate(1.5deg);
	}

	74% {
		transform: translate(-1.5px, 2.5px) rotate(1.5deg);
	}

	76% {
		transform: translate(-1.5px, 2.5px) rotate(1.5deg);
	}

	78% {
		transform: translate(-1.5px, 2.5px) rotate(.5deg);
	}

	80% {
		transform: translate(-1.5px, .5px) rotate(-.5deg);
	}

	82% {
		transform: translate(-1.5px, .5px) rotate(-.5deg);
	}

	84% {
		transform: translate(-.5px, .5px) rotate(1.5deg);
	}

	86% {
		transform: translate(2.5px, 1.5px) rotate(.5deg);
	}

	88% {
		transform: translate(-1.5px, .5px) rotate(1.5deg);
	}

	90% {
		transform: translate(-1.5px, -.5px) rotate(-.5deg);
	}

	92% {
		transform: translate(-1.5px, -1.5px) rotate(1.5deg);
	}

	94% {
		transform: translate(.5px, .5px) rotate(-.5deg);
	}

	96% {
		transform: translate(2.5px, -.5px) rotate(-.5deg);
	}

	98% {
		transform: translate(-1.5px, -1.5px) rotate(-.5deg);
	}

	0%, 100% {
		transform: translate(0, 0) rotate(0);
	}
}

.live2d-tool {
 position:fixed;
 bottom:0;
 left:0;
 width:auto;
 height:auto;
 z-index:100;
 border-radius:5px;
 font-size:13px;
 cursor:pointer;
 font-family:Ubuntu
}
@media(min-width:861px) {
 .live2d-tool {
  border-radius:0 5px 5px 0;
  width:35px;
  left:17px;
  color:#fff;
  font-size:13px;
  padding:5px 0;
  padding-top:5px;
  padding-right:0;
  padding-bottom:5px;
  padding-left:17px;
  font-weight:700;
  z-index:99;
  visibility:visible;
  writing-mode:vertical-rl;
  transiton-property:left,bottom;
  transition-duration:.5s,.5s
 }
 .live2d-tool:hover {
  left:0
 }
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .isWebKit .live2d-tool {
  position:fixed;
  left:0;
  width:auto;
  height:auto;
  z-index:100;
  border-radius:5px;
  font-size:13px;
  cursor:pointer
 }
 @media(min-width:861px) {
  .isWebKit .live2d-tool {
   border-radius:0 5px 5px 0;
   width:35px;
   margin-left:-35px;
   color:#fff;
   font-size:13px;
   padding:5px 0;
   padding-top:5px;
   padding-right:0;
   padding-bottom:5px;
   padding-left:17px;
   font-weight:700;
   z-index:99;
   writing-mode:vertical-rl;
   transiton-property:margin-left,bottom;
   transition-duration:.5s,.5s
  }
  .isWebKit .live2d-tool:hover {
   margin-left:-17px
  }
 }
}
@media(max-width:860px) {
 .live2d-tool {
  padding:0 5px
 }
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .live2d-tool {
  position:fixed;
  bottom:0;
  left:0;
  width:auto;
  height:auto;
  z-index:100;
  border-radius:5px;
  font-size:13px;
  cursor:pointer
 }
 @media(min-width:861px) {
  .live2d-tool {
   border-radius:0 5px 5px 0;
   width:35px;
   left:17px;
   color:#fff;
   font-size:13px;
   padding:5px 0;
   padding-top:5px;
   padding-right:0;
   padding-bottom:5px;
   padding-left:0;
   font-weight:700;
   z-index:90;
   writing-mode:vertical-rl;
   transiton-property:margin-left,bottom;
   transition-duration:.5s,.5s
  }
  .live2d-tool:hover {
   margin-left:0
  }
 }
}
@supports(-ms-ime-align:auto) {
 .live2d-tool {
  margin-left:0;
  left:17px;
  transiton-property:left,bottom
 }
 .live2d-tool:hover {
  margin-left:0
 }
}
.live2d-tool .keys {
 position:relative
}
.hide-live2d {
 bottom:0px;
 visibility:visible
}
.close-live2d {
 visibility:hidden
}
.live2d-pio,
.live2d-tia {
 visibility:hidden
}
.switch-live2d {
 visibility:hidden
}
.save-live2d {
 visibility:hidden
}
@media(min-width:861px) {
 .hide-live2d {
  background-color:#16a085;
  bottom:185px;
  visibility:visible;
  min-height:38.75px
 }
 .close-live2d {
  background-color:#b854d4;
  bottom:21px;
  visibility:visible;
  min-height:45px
 }
 .live2d-pio,
 .live2d-tia {
  background-color:#c3a6cb;
  bottom:156px;
  visibility:visible;
  min-height:20px
 }
 .switch-live2d {
  background-color:#16a;
  bottom:105px;
  visibility:visible;
  min-height:51px
 }
 .save-live2d {
  background-color:orange;
  bottom:66px;
  visibility:visible;
  min-height:39.3px
 }
}
.hide-live2d-tool {
 bottom:15px
}
